<template>
    <!--
    1. 完成详情的布局
    2. 调用详情接口，把详情取出来，然后在页面显示
    -->
    <div class="detail">

        <!--
        做一个返回导航
        -->
        <van-sticky>
            <van-nav-bar
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </van-sticky>

        <!--详情-->
        <div class="header">
            <h2>{{ info.title }}</h2>
            <div class="info">
                <p>
                    <van-icon name="eye-o"/>
                    {{ info.viewCount | formatViewCount }} 阅读
                </p>
                <p>{{ info.createTime | formatTime }}</p>
                <a class="collect">
                    <van-icon name='like-o'/>
                </a>
            </div>
        </div>
        <div class="descption">
            {{ info.description }}
        </div>
        <!--评论列表-->
        <div class="message">
            <h2 class="title">评论列表</h2>
            <ul class="list">
                <li class="item" v-for="ele in commentList">
                    <div class="left">
                        <van-image
                                width="50"
                                height="50"
                                :src="'https://yw.52kfw.cn' + ele.userInfo.imageUrl"
                        />

                    </div>
                    <div class="right">
                        <h2>{{ ele.title }}</h2>
                        <p class="time">{{ ele.createTime | formatTime}}</p>
                        <div class="infos">
                            {{ ele.content }}
                        </div>
                    </div>
                </li>
            </ul>

            <van-pagination v-model="currentPage" :total-items="total" :items-per-page="size" @change="pageChange"/>

        </div>
        <!--评论输入-->

        <div class="markup">
            <h2 class="title">评论</h2>
            <van-form @submit="onSubmit">
                <van-field
                        v-model="markup"
                        name="markup"
                        rows="3"
                        autosize
                        type="textarea"
                        maxlength="150"
                        placeholder="请输入留言"
                        show-word-limit
                        :rules="[{ required: true, message: '请填写留言信息' }]"
                />
                <div style="margin: 10px;">
                    <van-button round block type="primary" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>


    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "Detail",
        data() {
            return {
                newsId: -1,
                currentPage: 1,
                total: 100,
                size: 5,
                info: {},
                commentList: [],
                markup: '',
            }
        },
        created() {
            this.newsId = this.$route.query.id;
            this.getDetailById();
            this.getCommentByNewsId();

        },
        methods: {
            onSubmit() {
                console.log(this.markup);
                // 调用评论的接口即可（前提是要登录）
                let token = localStorage.getItem('newsToken');
                if (!token) {
                    this.$router.push('/login');
                } else {
                    console.log('完成评论的提交');
                }


            },
            pageChange() {
                console.log(this.currentPage);
                this.getCommentByNewsId();
            },
            async getCommentByNewsId() {
                let url = `https://yw.52kfw.cn/api/comment/getCommentList?newsId=${this.newsId}&pageSize=${this.size}&currentPage=${this.currentPage}`;

                let res = await axios.get(url);
                console.log(res);
                this.total = res.data.data.total;
                this.commentList = res.data.data.commentList


            },
            async getDetailById() {
                let url = `https://yw.52kfw.cn/api/news/detail?newsId=${this.newsId}`;
                let res = await axios.get(url);
                console.log(res);
                this.info = res.data.data.info;
            },
            onClickLeft() {
                this.$router.back();
            }
        }
    }
</script>

<style scoped lang="less">
    .detail {
        background-color: #fff;

        margin-bottom: 1.1rem;

        .header {
            background-color: #fff;
            padding: 0.3rem;

            h2 {
                line-height: 1.4;
                font-size: 0.6rem;
                margin-bottom: 0.2rem;
            }

            .info {
                display: flex;
                align-items: center;

                p {
                    margin-right: 0.15rem;
                }

                .collect {
                    font-size: 0.5rem;
                }

                .red {
                    color: #f00;
                }
            }
        }

        .descption {

            border-top: 2px solid #999;

            background-color: #fff;

            padding: 0.3rem;
            line-height: 1.5;
            text-indent: 2em;

            p {
                margin-bottom: 0.1rem;
            }
        }

        .message {
            .list {
                .item {
                    display: flex;
                    border-bottom: 1px solid #e4e4e4;
                    padding: 0.2rem 0;

                    .left {
                        margin-right: 0.3rem;
                    }

                    .right {
                        flex: 1;

                        > h2 {
                            font-size: 0.38rem;
                            color: #b8b8b8;
                        }

                        > p.time {
                            padding: 0.3rem 0;
                            font-size: 0.28rem;

                        }

                        .infos {
                            line-height: 1.3;
                            color: #000;
                            font-size: 0.3rem;

                            text-overflow: -o-ellipsis-lastline;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 5;
                            -webkit-box-orient: vertical;

                        }

                    }

                }
            }
        }

        .markup, .message {
            padding: 0.3rem;

            .title {
                font-size: 0.6rem;
                padding: 0.3rem 0;
            }

        }

    }
</style>
